<template>
	<div>
		<div style="display: inline-block;">
			<!-- <div style="position: relative;display: inline-block;margin: 5px;">
				<span>用户名：</span>
				<el-input style="width: 200px;" @keydown.enter.native="timeDate2" placeholder="请输入用户名"
					v-model="userName">
				</el-input>&nbsp;&nbsp;
			</div> -->
			<div style="position: relative;display: inline-block;margin: 5px;">
				<span>用户电话：</span>
				<el-input style="width: 200px;" @keydown.enter.native="timeDate2" placeholder="请输入用户电话" v-model="phone">
				</el-input>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;margin: 5px;">
				<span>订单号：</span>
				<el-input style="width: 200px;" @keydown.enter.native="timeDate2" placeholder="请输入订单号" v-model="title">
				</el-input>&nbsp;&nbsp;
			</div>
			<div style="position: relative;display: inline-block;margin: 5px;">
				<span>发票状态：</span>
				<el-select v-model="status" style="width:150px;margin-left: 10px;" @change="timeDate2()">
					<el-option v-for="item in statesnum" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;
			</div>
			<div style="margin:5px;display: inline-block;">
				<span>开始时间：</span>
				<el-date-picker style="width: 160px;margin-left: 10px;" v-model="startTime" align="right"
					type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
				</el-date-picker>&nbsp;&nbsp;&nbsp;
			</div>
			<div style="margin:5px;display: inline-block;">
				<span>截止时间：</span>
				<el-date-picker style="width: 160px;margin-left: 10px;" v-model="endTime" align="right" type="datetime"
					format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择截止时间">
				</el-date-picker>
			</div>
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="timeDate2">
				查询</el-button>
			<el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="clear">
				重置</el-button>
			<el-button style='margin:0 0 20px 20px;' size="mini" type="primary" icon="document" @click="transferClcik()"
				:disabled="checkBoxData.length <= 0 || !isAuth('invoice:transfer')">
				批量开票
			</el-button>
			<el-button style='margin-left:15px;' size="mini" type="warning" icon="document" @click="exportBtn">导出
			</el-button>
		</div>
		<div style="color: orange;"> * 导出发票提示：导出发票前请进行时间或者状态等筛选，否则导出发票量过多易出现卡顿或系统崩溃</div>
		<el-table v-loading="tableDataLoading" :data="tableData.records" @selection-change="changeFun">
			<el-table-column type="selection" fixed="left">
			</el-table-column>
			<el-table-column prop="invoiceId" label="编号" width="50" fixed="left"></el-table-column>
			<el-table-column prop="nickName" label="用户名" fixed="left">
				<template slot-scope="scope">
					<span style="color: #f56c6c;cursor:pointer"
						@click="updates(scope.row)">{{ scope.row.nickName }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="userEmail" label="邮箱">
			</el-table-column>
			<el-table-column prop="userPhone" label="用户电话">
			</el-table-column>
			<el-table-column prop="indentNumber" label="订单号" width="170">
				<template slot-scope="scope">
					<div v-if="scope.row.indentNumber">
						<div v-for="(item,index) in scope.row.indentNumber.split(',')">{{item}} </div>
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="invoiceContent" label="开票信息" width="300">
				<template slot-scope="scope">
					<el-popover placement="top-start" title="" trigger="hover">
						<div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height:80px;"
							v-html="scope.row.invoiceContent" slot="reference"></div>
						<div style="width: 500px;" v-html="scope.row.invoiceContent"></div>
					</el-popover>
				</template>
			</el-table-column> -->
			<el-table-column prop="invoiceType" label="发票类型">
				<template slot-scope="scope">
					<span v-if="scope.row.invoiceType==1">公司</span>
					<span v-if="scope.row.invoiceType==2">个人</span>
				</template>
			</el-table-column>
			<el-table-column prop="taxPayerNumber" label="税号" width="180">
			</el-table-column>
			<el-table-column prop="invoiceMoney" label="发票金额">
			</el-table-column>
			<el-table-column prop="bankAddress" label="注册地址">
			</el-table-column>
			<el-table-column prop="bankDeposit" label="开户行">
			</el-table-column>
			<el-table-column prop="bankNumber" label="银行卡号">
			</el-table-column>
			<el-table-column prop="bankPhone" label="注册电话">
			</el-table-column>
			<el-table-column prop="invoiceHeader" label="发票抬头" width="180">
			</el-table-column>
			<el-table-column prop="invoiceTitle" label="发票标题" width="180">
			</el-table-column>
			<el-table-column prop="status" label="发票状态" fixed="right">
				<template slot-scope="scope">
					<span v-if="scope.row.status==1" style="color:red">待开票</span>
					<span v-if="scope.row.status==2" style="color: darkgreen;">已开票</span>
					<el-switch v-model="scope.row.status"
						@change="change3(scope.row.status,scope.row)" :active-value="openValue"
						:inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949" :disabled="!isAuth('invoice:transfer')">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="170">
			</el-table-column>
			<el-table-column prop="status" label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" :disabled="!isAuth('invoice:update')" @click="amendBanner(scope.row)">修改</el-button>
					
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="tableData.total">
			</el-pagination>
		</div>
		
		<!-- 修改发票 -->
		<el-dialog title="修改发票" :visible.sync="dialogFormVisible" center width="80%">
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">用户名：</span>
				<el-input style="width:50%;" v-model="nickName" disabled placeholder="请输入用户名">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">用户电话：</span>
				<el-input style="width:50%;" v-model="userPhone" placeholder="请输入用户电话">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">邮箱：</span>
				<el-input style="width:50%;" v-model="userEmail" placeholder="请输入邮箱">
				</el-input>
			</div>
			
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">订单号：</span>
				<el-input style="width:50%;" v-model="indentNumber" disabled placeholder="请输入订单号">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">发票类型：</span>
				<el-radio-group v-model="invoiceType">
					<el-radio :label="1">公司</el-radio>
					<el-radio :label="2">个人</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">税号：</span>
				<el-input style="width:50%;" v-model="taxPayerNumber" placeholder="请输入税号">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">发票金额：</span>
				<el-input style="width:50%;" v-model="invoiceMoney" placeholder="请输入发票金额">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">注册地址：</span>
				<el-input style="width:50%;" v-model="bankAddress" placeholder="请输入注册地址">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">开户行：</span>
				<el-input style="width:50%;" v-model="bankDeposit" placeholder="请输入开户行">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">银行卡号：</span>
				<el-input style="width:50%;" v-model="bankNumber" placeholder="请输入银行卡号">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">注册电话：</span>
				<el-input style="width:50%;" v-model="bankPhone" placeholder="请输入注册电话">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">发票抬头：</span>
				<el-input style="width:50%;" v-model="invoiceHeader" placeholder="请输入发票抬头">
				</el-input>
			</div>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">发票标题：</span>
				<el-input style="width:50%;" v-model="invoiceTitle" placeholder="请输入发票标题">
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				openValue: 2,
				closeValue: 1,
				tableDataLoading: true,
				dialogFormVisible: false,
				tableData: [],
				memberName: '',
				memberImg: '',
				memberId: '',
				sort: '',
				startTime: '',
				endTime: '',
				info: {
					stockDate: this.getNowTime(), //日期
				},
				info2: {
					stockDate2: this.getNowTime2(), //日期
				},
				userId: '',
				userName: '',
				companyName: '',
				title: '',
				content: '',
				phone: '',
				status: '',
				statesnum: [{
						value: '',
						label: '全部'
					},
					{
						value: 1,
						label: '待开票'
					}, {
						value: 2,
						label: '已开票'
					}
				],
				checkBoxData: [], //多选框选择的值
				
				userId:'',
				nickName:'',
				userEmail:'',
				userPhone:'',
				indentNumber:'',
				invoiceType:'',
				taxPayerNumber:'',
				invoiceMoney:'',
				bankAddress:'',
				bankDeposit:'',
				bankNumber:'',
				bankPhone:'',
				invoiceHeader:'',
				invoiceTitle:'',
				invoiceId:'',
			}
		},
		methods: {
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() //得到月份
				var date = now.getDate() //得到日期
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			//处理默认选中当前日期
			getNowTime2() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() - now.getMonth() //得到月份
				var date = now.getDate() - now.getDate() + 1 //得到日期
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			// 详情跳转
			updates(row) {
				if (row.userId) {
					this.$router.push({
						path: '/userDetail',
						query: {
							userId: row.userId
						}
					})
				}

			},
			// 获取数据列表
			dataSelect() {
				var endTime = this.endTime
				if (this.endTime != '') {
					endTime = this.endTime
				} 
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('admin/invoice/adminGetIndentList'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						// 'userId': this.userId,
						// 'userName': this.userName,
						// 'companyName': this.companyName,
						'indentNumber': this.title,
						// 'content': this.content,
						'phone': this.phone,
						'status': this.status,
						'startTime': this.startTime,
						'endTime': endTime,

					})
				}).then(({
					data
				}) => {
					if (data && data.code === 0) {
						this.tableDataLoading = false
						let returnData = data.data;
						this.tableData = returnData;
					}

				})
			},
			timeDate2() {
				this.page = 1
				this.dataSelect()
			},
			clear() {
				this.page = 1
				this.userName = ''
				this.companyName = ''
				this.title = ''
				this.content = ''
				this.phone = ''
				this.status = ''
				this.startTime = ''
				this.endTime = ''
				this.dataSelect()
			},
			//上传成功
			handleAvatarSuccess(file) {
				this.memberImg = file.data
			},
			addNotice() {
				this.dialogFormVisible = true
			},
			handleCurrentChange(val) {
				this.page = val
				this.dataSelect()
			},
			handleSizeChange(val) {
				this.limit = val
				this.dataSelect()
			},
			// 修改
			amendBanner(rows) {
				this.userId = rows.userId
				this.nickName = rows.nickName
				this.userEmail = rows.userEmail
				this.userPhone = rows.userPhone
				this.indentNumber = rows.indentNumber
				this.invoiceType = rows.invoiceType
				this.taxPayerNumber = rows.taxPayerNumber
				this.invoiceMoney = rows.invoiceMoney
				if(rows.bankAddress){
					this.bankAddress = rows.bankAddress
				}else{
					this.bankAddress = ''
				}
				if(rows.bankDeposit){
					this.bankDeposit = rows.bankDeposit
				}else{
					this.bankDeposit = ''
				}
				if(rows.bankNumber){
					this.bankNumber = rows.bankNumber
				}else{
					this.bankNumber = ''
				}
				if(rows.bankPhone){
					this.bankPhone = rows.bankPhone
				}else{
					this.bankPhone = ''
				}
				this.invoiceHeader = rows.invoiceHeader
				this.invoiceTitle = rows.invoiceTitle
				this.invoiceId = rows.invoiceId
				this.dialogFormVisible = true
			},
			// 修改
			amendNoticeTo() {
				this.$http({
					url: this.$http.adornUrl('admin/invoice/updateInvoiceInfo'),
					method: 'post',
					// data: this.$http.adornData({
					params: this.$http.adornParams({
						'userId':this.userId,
						'userEmail':this.userEmail,
						'userPhone':this.userPhone,
						'indentNumber':this.indentNumber,
						'invoiceType':this.invoiceType,
						'taxPayerNumber':this.taxPayerNumber,
						'invoiceMoney':this.invoiceMoney,
						'bankAddress':this.bankAddress,
						'bankDeposit':this.bankDeposit,
						'bankNumber':this.bankNumber,
						'bankPhone':this.bankPhone,
						'invoiceHeader':this.invoiceHeader,
						'invoiceTitle':this.invoiceTitle,
						'invoiceId':this.invoiceId,
					})
				}).then(({
					data
				}) => {
					if(data.code==0){
						this.dialogFormVisible = false
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					}else{
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
							}
						})
					}
					
				})
			},
			//删除一级
			deletes(row) {
				let delid = row.memberId
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`member/deleteMemberById/?memberId=${delid}`),
						method: 'post',
						data: this.$http.adornData({})
					}).then(({
						data
					}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					})
				}).catch(() => {})
			},
			// 批量操作
			transferClcik(id) {

				var ids = id ? [id] : this.checkBoxData.map(item => {
					return item.invoiceId
				})
				this.$http({
					url: this.$http.adornUrl('admin/invoice/updateInvoice'),
					method: 'post',
					params: this.$http.adornParams({
						'ids': ids.toString(),
						'status': 2

					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '修改成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					}
					if (data.code == 9999) {
						this.$message({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'error',
							onClose: () => {
							}
						})
					}
				})
			},
			// 多选
			changeFun(val) {
				this.checkBoxData = val
			},
			// 单独修改
			change3(status, row) {
				this.$http({
					url: this.$http.adornUrl('admin/invoice/updateInvoice'),
					method: 'post',
					params: this.$http.adornParams({
						'ids': row.invoiceId,
						'status': status
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '修改成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {}
						})
					}

				})
			},
			// 查看开票详情
			invoiceBtn(row,indentNumber){
				this.$http({
					url: this.$http.adornUrl('admin/invoice/getInvoiceInfo'),
					method: 'get',
					params: this.$http.adornParams({
						'invoiceId': row.invoiceId,
						'indentNumber': indentNumber
					})
				}).then(({
					data
				}) => {
				
				})
			},
			// 导出
			exportBtn() {
				
				var endTime = this.endTime
				if (this.endTime != '') {
					endTime = this.endTime
				} 
				this.$http({
					url: this.$http.adornUrl('admin/invoice/export'),
					method: 'get',
					responseType: 'blob',
					params: this.$http.adornParams({
						// 'userId': this.userId,
						// 'userName': this.userName,
						// 'companyName': this.companyName,
						'indentNumber': this.title,
						// 'content': this.content,
						'phone': this.phone,
						'status': this.status,
						'startTime': this.startTime,
						'endTime': endTime,
			
					})
				}).then(({
					data
				}) => {
					let blob = new Blob([data], {
						type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
					})
					if (window.navigator.msSaveOrOpenBlob) {
						navigator.msSaveBlob(blob)
					} else {
						let url = window.URL.createObjectURL(blob)
						let elink = document.createElement('a')
						elink.download = '订单列表.xlsx'
						elink.style.display = 'none'
						elink.href = url
						document.body.appendChild(elink)
						elink.click()
						document.body.removeChild(elink)
					}
				})
			},
		},
		mounted() {
			this.dataSelect()
		}
	}
</script>

<style>
</style>
